.container {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  .row {
    position: relative;
    width: 100%;
    display: flex;
    white-space: nowrap;
    font-size: 42px;
    transform: rotate(-30deg) translate(-560px, -560px);

    $duration: 150s;

    div {
      animation: animate1 $duration linear infinite;
      animation-delay: -$duration;

      &:nth-child(2) {
        animation: animate2 $duration linear infinite;
        animation-delay: calc($duration/ -2);
      }

      svg {
        padding: 0 5px;
        user-select: none;
        cursor: default;
        transition: 6s;
        path {
          fill: rgba(0, 0, 0, 0.5);
        }
        &:hover {
          transition: 0s;
          filter: drop-shadow(0 0 20px #0f0);
          path {
            fill: #0f0;
          }
        }
      }
    }

    &:nth-child(even) div {
      font-size: 1em;
      white-space: nowrap;
      animation: animate3 $duration linear infinite;
      animation-delay: -$duration;

      &:nth-child(2) {
        animation: animate4 $duration linear infinite;
        animation-delay: calc($duration/ -2);
      }
    }
  }

  @keyframes animate1 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes animate2 {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-200%);
    }
  }
  @keyframes animate3 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes animate4 {
    0% {
      transform: translateX(-200%);
    }
    100% {
      transform: translateX(0);
    }
  }
}
